<template>
  <div class="chat" ref="chat">
    <div class="chat-left">
      <div class="img">
        <img
          class="avator"
          :src="require('../assets/images/avator-' + user.imgId + '.jpg')"
        />
      </div>
      <div class="chatlist">
        <span class="icon iconfont iconliaotian"></span>
      </div>
      <div class="self">
        <span class="icon iconfont icontubiao-08"></span>
      </div>
    </div>
    <div class="chat-center">
      <div class="userlist">
        yonghulieb
      </div>
      <div class="list">
        <ul>
          <li v-for="(item, index) in userList" :key="index" class="user-item">
            <img
              :src="require('../assets/images/avator-' + item.imgId + '.jpg')"
              alt=""
            />
            <span>{{ item.username }}</span>
          </li>
        </ul>
      </div>
    </div>
    <div class="chat-right" ref="chat">
      <p class="center">chat ({{ userLength }})</p>
      <div class="chatMessage">
        <ul class="chatroom" ref="userseeing">
          <!-- 这里也应该放在下面 -->
          <li class="system" v-for="item in joinRoom" :key="item.username">
            <span ref="systemMessage">欢迎{{ item.username }}加入群聊 </span>
          </li>
          <!-- 消息显示 -->
          <li
            v-for="(message, index) in messageContent"
            :key="index + message.type"
            :class="{
              myMessage: message.type === 'my' ? true : false,
              otherMessage: message.type === 'other' ? true : false
            }"
          >
          <!-- 离开 -->
            <div v-if="message.type === 3" class="system">
              {{ message.username }}离开了群聊
            </div>
            <!-- 自己的消息 -->
            <div v-if="message.type === 'my'">
              <img :src="message.file" alt class="file" @load="loadOverImg" preview="1" v-if="message.file" />
              <span v-else class="context iconfont">{{ message.msg }}</span>
              <img
                class="avatar"
                :src="
                  require('../assets/images/avator-' + message.imgId + '.jpg')
                "
              />
            </div>
            <!-- 别人的消息 -->
            <div v-else-if="message.type === 'other'">
              <img
                alt
                class="avatar"
                :src="
                  require('../assets/images/avator-' + message.imgId + '.jpg')
                "
              />
              <span class="username">{{ message.username }}</span>
              <img :src="message.file" alt class="file" v-if="message.file" @load="loadOverImg" preview="1" />
              <span class="content iconfont" v-else>{{ message.msg }}</span>
            </div>
          </li>
        </ul>
      </div>

      <div class="send">
        <div class="tool">
          <span class="icon iconfont iconbiaoqing " @click=" emojiShow=!emojiShow "></span>
          <div class="emoji" tabindex="1" v-show="emojiShow" @mouseleave="handleEmojiBlur">
            <span
              v-for="item in emojiList"
              :key="item.codes"
              @click="handleEmoji(item)"
            >{{item.char}}</span>
          </div>
          <span class="icon iconfont iconjietu" @click="handleCanvas" ></span>
          <label class="icon iconfont iconwenjian2" for="file"></label>
          <!-- 隐藏的选择文本框 -->
          <input type="file" style="display:none" id="file" @change="handleFile" />
        </div>
        <div class="sendMessage">
          <textarea
            cols="80"
            rows="5"
            ref="textarea"
            @keyup.enter="handlePress"
          ></textarea>
          <button @click="sendMessage">发送</button>
        </div>
      </div>
    </div>
   
  </div>
</template>

<script>
import html2canvas from 'html2canvas'
import emioj from '../assets/images/emoji.json'
// import { VueCropper }  from 'vue-cropper' 
export default {
  props: {
    user: Object,
    userList: Array,
    message: Object
  },
  data() {
    return {
      joinRoom: [],
      messageContent: [],
      //聊天消息
      text: "",
      emojiList: [] ,//表情包
      emojiShow: false,
  
    };
  },
  methods: {
    //有人离开聊天室
    haveOneleaveRoom() {
      const leaveRoom = this.$store.state.leaveRoom;
      this.messageContent.push({ ...leaveRoom, type: 3 });
      // console.log(this.messageContent);
    },
    //enter发送消息
    handlePress() {
      this.sendMessage();
    },
    // 发送消息
    sendMessage() {
      //拿到消息
      this.text = this.$refs.textarea.value.trim();
      // console.log(this.text);
      if (!this.text) {
        alert("请输入内容");
        return;
      }
      this.$refs.textarea.value = "";
      //发送消息
      this.$emit("sendMessage", this.text);
    },
    //更新消息
    updateMessage(newVal) {
      //如果是自己的消息
      if (newVal.username === this.user.username) {
        this.messageContent.push({ ...newVal, type: "my" });
      } else {
        //别人的消息
        this.messageContent.push({ ...newVal, type: "other" });
      }
    },
    //把消息显示出来
    handleScrollBottom() {
      const ul = this.$refs.userseeing;
      ul.scrollTop = ul.scrollHeight;
      // console.log(ul.scrollTop, ul.scrollHeight);
    },
    //选择文件
    handleFile(e) {
      //拿到文件
     let file =  e.target.files[0]
     //读取文件对象
     let reader = new FileReader
     //异步读取文件
     reader.readAsDataURL(file)
     //文件读取完成之后发送
     reader.onload = (e) => {
      //  console.log(e.target.result)
       this.$emit('handleFile',e.target.result)
     }

    },
    //显示图片
    handleImage(file) {
      this.updateMessage(file)
    },
    //加载图片
    loadOverImg() {
      this.$previewRefresh()
      this.handleScrollBottom()
    },
    //表情包移出就不显示
    handleEmojiBlur() {
      this.emojiShow = false
      // console.log('111')
    },
    //添加表情
    handleEmoji(emoji) {
      this.text = this.$refs.textarea.value
      this.$refs.textarea.value += emoji.char +' '
    },
    //截图
      handleCanvas() {
      const chat = this.$refs.chat
      html2canvas(chat).then((canvas) => {
        const imgUrl = canvas.toDataURL()
        this.$emit('handleFile', imgUrl)
      })
    },
    realTime() {

    }
  },
  computed: {
    //聊天室人数
    userLength() {
      return this.userList.length;
    }
  },
  watch: {
    //更新消息
    message(newVal) {
      this.updateMessage(newVal);
    }
  },
  created() {
    // console.log(this.message)
  },
  mounted() {
    //加入聊天室的人
    this.joinRoom = this.$store.state.joinRoom;
    this.emojiList = emioj
    // console.log(this.$store.state)
  },
  updated() {
    // 显示聊天
    this.handleScrollBottom();
  }
};
</script>

<style lang="scss" scoped>
.chat {
  display: flex;
  height: 550px;
  width: 900px;
  margin: 20px auto;
  flex-direction: row;
  background-color: rgb(161, 157, 154);
  .cropper {
    width: 300px;
    height: 300px;
  }
  .chat-left {
    display: flex;
    width: 60px;
    flex-direction: column;
    // height: 100%;
    // background-color: greenyellow;
    .img {
      margin: 5px;
      width: 50px;
      height: 50px;
      // background-color: greenyellow;
      .avator {
        width: 50px;
        height: 50px;
      }
    }
    .chatlist {
      margin: 10px;
      span {
        font-size: 40px;
        color: greenyellow;
      }
    }
    .self {
      margin: 10px;
      span {
        font-size: 40px;
        color: greenyellow;
      }
    }
  }
  .chat-center {
    display: flex;
    flex-direction: column;
    // width: 130px;
    flex: 0 0 150px;
    background-color: rgb(201, 192, 192);
    .userlist {
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      // background-color: grey;
      color: rgb(70, 57, 57);
      border-bottom: 1px solid yellowgreen;
    }
    ul {
      margin: 0;
      padding: 0;
      .user-item {
        padding: 0 4px;
        margin: 4px 0;
        display: flex;
        align-items: center;
        img {
          margin-right: 4px;
          width: 30px;
          height: 30px;
        }
      }
    }
  }
  .chat-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: rgb(244, 247, 244);
    // overflow: auto;
    .center {
      margin: 0;
      height: 30px;
      text-align: center;
      line-height: 30px;
      border-bottom: 1px solid rgb(144, 236, 69);
    }
    .chatMessage {
        padding: 0;
      // display: flex;
      height: 350px;
      // overflow: scroll;
      // background-color: darkmagenta;
      .chatroom {
        text-align: center;
        color: #ccc;
        overflow: auto;
        height: 350px;
        li {
          padding: 5px;
        }
      }
      .system {
        //   margin: 5px;
        //   height: 20px;
        width: 100%;
        text-align: center;
        color: gray;
        font-size: 10px;
      }
      ul {
          margin: 0;
          padding: 0;
      }

      .myMessage {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        div {
          display: flex;
          position: relative;
          .context {
            box-sizing: border-box;
            display: inline-block;
            border-radius: 5px;
            line-height: 32px;
            background-color: yellowgreen;
            color: #000;
            padding: 5px;
            margin-right: 5px;
            min-width: 40px;
            word-wrap: break-word;
            &::after {
              content: "\e62e";
              position: absolute;
              color: yellowgreen;
              right: 33px;
              top: 3%;
              font-size: 30px;
            }
          }
          .avatar {
          //   position: absolute;
          //   right: 0px;
          margin: 0 5px 0 10px;
          width: 30px;
          height: 30px;
          vertical-align: middle;
        }
        .file {
          max-width: 330px;
            max-height: 170px;
            margin-right: 5px;
            cursor: pointer;
        }
        }
      }
      .otherMessage {
          position: relative;
        display: flex;
        justify-content: flex-start;
        div {
            width: 100%;
            height: 100%;
            display: flex;
            position: relative;
        }
        .username {
          position: absolute;
           top: -5px;
           left: 35px;
          font-size: 10px;
          color: gray;
          // margin-bottom: 2px;
        }
        .content {
          margin-top: 12px;
            box-sizing: border-box;
            display: inline-block;
            border-radius: 5px;
            line-height: 32px;
            background-color: rgb(196, 163, 32);
            color: #000;
            padding: 5px;
            margin-left: 15px;
            // border: 1px solid #ccc;
            min-width: 40px;
          &::before {
            content: "\e67c";
            position: absolute;
            color: yellowgreen;
             left: 28px;
            color: rgb(196, 163, 32);
            font-size: 30px;
          }
        }
        .avatar {
        //   margin-left: 5px;
          width: 30px;
          height: 30px;
          vertical-align: middle;
        }
        .file {
          margin: 14px 0px 0 8px;
          max-width: 330px;
            max-height: 170px;
            // margin-right: 10px;
            cursor: pointer;
            
        }
      }
    }
    .send {
      flex: 1;
      display: flex;
      flex-direction: column;
      background-color: rgb(144, 236, 69);
      .tool {
        display: flex;
        align-items: center;
        padding-left: 5px;
        height: 23px;
        background-color: rgb(161, 157, 154);
        span,label {
          display: inline-block;
          margin: 0 10px;
          color: chartreuse;
          cursor: pointer;
          font-size: 20px;
        }
        .emoji {
          position: absolute;
          margin-bottom: 10px;
          bottom: 60px;
          width: 400px;
          height: 300px;
          overflow: scroll;
          background-color: #ccc
        }
      }
      .sendMessage {
        position: relative;
        // height: 172px;
        flex: 1;
        background-color: rgb(244, 247, 244);
        textarea {
             border: none;
        resize: none;
        outline: none;
        font-size: 15px;
        padding-left: 9px;
            background-color: rgb(244, 247, 244);
        }

        button {
          position: absolute;
          right: 50px;
          bottom: 50px;
          width: 50px;
          height: 30px;
          background-color: skyblue;
          border-radius: 10px;
          outline: none;
          border: 1px solid slategrey;
          color: slategrey;
          cursor: pointer;
        }
      }
    }
   
  }
}
</style>
